<!--
 * @Author: XIAOXUN\听雨 1396046689@qq.com
 * @Date: 2025-11-25 11:07:28
 * @LastEditors: XIAOXUN\听雨 1396046689@qq.com
 * @LastEditTime: 2025-11-26 17:54:19
 * @FilePath: \music-app-team\components\DiscoverTabPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="container">
		<view>
			<!-- 搜索框 -->
			<uni-search-bar cancelButton="none" :focus="true" placeholder="请输入歌手姓名" v-model="searchValue"
				@confirm="search">
				<template v-slot:searchIcon>
					<uni-icons color="#00c273" size="18" type="search"></uni-icons>
				</template>
			</uni-search-bar>
		</view>

		<!-- 专辑列表，专辑列表数据不为空时显示 -->
		<view class="album-grid" v-if="albumList.length>0">
			<view class="grid-item" v-for="(album, index) in albumList" :key="index"
				:class="{ active: activeIndex === index }">
				<!-- 内部结构完全不变，保留你原有的所有内容 -->
				<view class="grid-item-box" @click="goAlbumDetail(album.id,album.name)">
					<image :src="album.coverImage" mode="aspectFill"></image>
					<view class="grid-info">
						<text class="text">{{album.name}}</text>
						<text class="text">{{album.artist}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 错误提示：专辑列表数据为空时显示 -->
		<view v-else style="text-align: center; font-weight: bold;">
			<text>暂无记录</text>
		</view>
	</view>
</template>



<script>
	export default {
		name: "DiscoverTabPage",
		data() {
			return {
				albumList: [], // 用于存储专辑列表响应数据
				searchValue: "" // 搜索关键词
			};
		},
		methods: {
			//获取专辑数据
			getAlbumList() {
				uni.request({
					url: 'https://apifoxmock.com/m1/5460619-0-default/getAlbumList',
					method: 'GET',
					success: (res) => {
						console.log(res);
						if (res.statusCode === 200) {
							this.albumList = res.data.data;
							//console.log('获取专辑列表成功', res.data);
						} else {
							console.error('获取专辑列表失败', res.message || '未知错误');
						}
					},
					fail: (err) => {
						console.error('请求失败', err);
					}
				});
			},
			//搜索功能
		search() {
			// 未输入搜索关键词
			if (!this.searchValue) {
				this.getAlbumList();
				return;
			}
			// 对搜索关键词进行 URL 编码
			const encodedKeyword = encodeURIComponent(this.searchValue);
			// 将输入的关键字 keyword 作为参数补充到请求路径中
			uni.request({
				url: `https://apifoxmock.com/m1/5460619-0-default/getAlbumByKeyword?keyword=${encodedKeyword}`,
				method: 'GET',
				success: (res) => {
					console.log(res);
					if (res.data && res.data.statusCode === 200) {
						// 搜索成功,将搜索结果赋值给专辑列表数据 albumList
						this.albumList = res.data.data || [];
					} else if (res.data && res.data.statusCode === 400) {
						// 未找到符合结果的搜索数据,让专辑列表数据为空
						this.albumList = [];
					} else {
						// 其他情况也显示空列表
						this.albumList = [];
					}
				},
				fail: (err) => {
					console.error('搜索请求失败:', err);
					// 请求失败时也显示空列表
					this.albumList = [];
				}
			});
		},
			//跳转到专辑详情页面
			goAlbumDetail(albumId, albumName) {
				uni.navigateTo({
					url: `/pages/album_detail/album_detail?id=${albumId}&name=${albumName}`
				});
			},
		},
		created() {
			this.getAlbumList();
		}
	}
</script>



<style lang="scss">
	.container {


		padding: 0 20rpx;
		font-size: 14px;
		line-height: 24px;

		// 专辑

		.album-grid {
			display: flex;
			flex-wrap: wrap; // 强制换行
			// gap: 15rpx; // 卡片间距
			width: 100%; // 关键：强制占满父容器宽度
			box-sizing: border-box;
		}

		/* 网格项：2列布局，宽度=50%-间距/2 */
		.grid-item {
			width: calc(50% - 7.5rpx);
			box-sizing: border-box;
			flex-shrink: 0;
		}

		/* 原highlight=true效果：点击高亮 */
		.grid-item.active {
			background-color: rgba(0, 0, 0, 0.05);
			border-radius: 12rpx;
		}

		.grid-item-box {
			position: relative;
			padding: 10rpx;
			width: 100%;
			height: 500rpx;
			box-sizing: border-box;

			// 专辑图片
				.grid-item-box image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}

			// 专辑信息
			.grid-info {
				position: absolute;
				width: 80%;
				bottom: 5%;
				left: 6%;
				background-color: #00c273;
				color: #fff;
				padding: 10rpx;
				border-radius: 10rpx;
			}

			.grid-info text {
				font-weight: bold;
				text-align: center;
			}
		}

	}
</style>